<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门管理</title>

  <!--企业中，头部引用js过多，可能会引起页面加载慢，用户体验不好，js可以放到body或者body下面-->
  <!--引入的vue.js-->
  <script src="/js/vue.js"></script>
  <!--引入elementUI的css-->
  <link  type="text/css" rel="stylesheet" href="/css/index.css">
  <!--引入elementUI的js-->
  <script src="/js/index.js"></script>
  <!--引入axios.js-->
  <script src="/js/axios.min.js"></script>

</head>
<body>
  <div id="app">
      <!--搜索功能-->
      <el-row>
          <el-col :span="4"><el-input size="mini" v-model="searchForm.deptNo" placeholder="请输入部门编号"></el-input></el-col>
          <el-col :span="4"><el-input size="mini" v-model="searchForm.deptName" placeholder="请输入部门名称"></el-input></el-col>
          <el-col :span="4"><el-input size="mini" v-model="searchForm.loc" placeholder="请输入部门位置"></el-input></el-col>
          <el-col :span="4">
              <el-button size="mini" type="primary" icon="el-icon-search" @click="search">搜索</el-button>&nbsp;&nbsp;
              <el-button size="mini" type="primary"  @click="handleAdd">添加</el-button>

          </el-col>
          <el-col :span="4"></el-col>
          <el-col :span="4"></el-col>
      </el-row>
      <!--数据列表-->
      <el-table
              :data="tableData"
              style="width: 100%">
          <el-table-column
                  prop="deptNo"
                  label="部门编号"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="deptName"
                  label="名称"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="loc"
                  label="位置">
          </el-table-column>
          <el-table-column label="操作">
              <!--template 模版  可以理解为父子组件传递参数 参数的名称叫scope   scope代表tableData=[{index:1,deptNo:149,deptName:2333,loc:333},{index:2,...},{...}]-->
              <template slot-scope="scope">
                  <!--scope.row={deptNo:149,deptName:2333,loc:333}-->
                  <!--scope.row={deptNo:148,deptName:2222,loc:2222}  ....-->
                  <!--scope.$index=0-->
                  <!--scope.$index=1 ....-->
                  <el-button
                          size="mini"
                          type="primary"
                          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                          size="mini"
                          type="danger"
                          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
          </el-table-column>
      </el-table>

      <!--分页功能-->
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5,10,15,20,100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>

      <!--添加/更新对话框-->
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
          <el-form :model="form" :rules="rules" ref="form">
              <el-form-item label="部门名称" :label-width="formLabelWidth" prop="deptName">
                  <el-input v-model="form.deptName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="部门位置" :label-width="formLabelWidth" prop="loc">
                  <el-input v-model="form.loc" autocomplete="off"></el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible=false">取消</el-button>
              <el-button @click="resetForm('form')">重置</el-button>
              <el-button type="primary" @click="submitForm('form')">确 定</el-button>
          </div>
      </el-dialog>

      <!--更新对话框-->
      <!--<el-dialog title="部门更新" :visible.sync="dialogFormVisible1">
          <el-form :model="form" :rules="rules" ref="form">
              <el-form-item label="部门名称" :label-width="formLabelWidth" prop="deptName">
                  <el-input v-model="form.deptName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="部门位置" :label-width="formLabelWidth" prop="loc">
                  <el-input v-model="form.loc" autocomplete="off"></el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible=false">取消</el-button>
              <el-button @click="resetForm('form')">重置</el-button>
              <el-button type="primary" @click="submitForm('form')">确 定</el-button>
          </div>
      </el-dialog>-->
  </div>
  <script>
      //编写js代码
      new Vue({
          el:"#app", //让vue对象和div（根元素）进行绑定
          data() {  //html元素中使用的所有数据（对象，列表，变量等）都在这定义
              return {
                  tableData: [],
                  currentPage: 1, //分页参数  页码，第几页
                  pageSize: 10, //分页参数  每页显示数量
                  total: 100,//分页参数  总数量
                  searchForm: {}, //搜索的form对象
                  dialogFormVisible: false,//是否显示当前对话框  false 不显示
                  title: '部门添加', //弹出对话框的标题信息
                  //dialogFormVisible1: false,//是否显示当前对话框  false 不显示
                  form: {  //提交数据的form对象
                      deptName: '',  //具体对象对应属性  和java中类中的属性对应
                      loc: ''
                  },
                  formLabelWidth: '120px', //label的宽度 部门名称   部门位置
                  rules: {
                      deptName: [ //可以定义对上面prop=deptName里面包含的输入框的规则定义   可以是多条   使用多个对象表示
                          //required 要求输入框不能为空
                          //trigger  触发器   blur 失去焦点
                          //message 提示信息
                          //当前名字为prop=deptName里面放的input输入框，要求不能为空，当失去焦点（鼠标从输入框移出时）,如果为空就会触发提示信息“请输入部门名称”
                          { required: true, message: '请输入部门名称', trigger: 'blur' },
                          //min 最小值  当前输入框中输入的最小长度
                          //max 最大值  当前输入框中输入的最大长度
                          //失去焦点做验证，如果验证不在规定的范围内，就提示message中的信息
                          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                      ],
                      loc: [
                          { required: true, message: '请输入部门位置', trigger: 'blur' },
                          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                      ]
                  }
              }
          },
          created(){//页面初始化时要执行的代码
               //调用方法
               this.loadData();
          },
          methods: { //当前页面中元素事件触发方法，函数，都写在这。。。
              //封装数据加载方法
              loadData(){
                  //定义 this是vue对象
                  let _this = this;
                  // 向给定ID的用户发起请求  {"deptNo":101,"deptName":"下","loc":"由"}
                  //          searchForm: {"deptNo":'',"deptName":'',"loc":''}
                  axios.post('/dept/queryByPage',{"pageNo":this.currentPage,"pageSize":this.pageSize,"data":this.searchForm})
                      .then(function (response) {
                          // 处理成功情况   response后台给我们响应的数据

                          console.log(response);
                          //判断返回状态
                          if(response.data.code==200){
                              //如果在这里面直接使用this，就是当前axios对象
                              _this.tableData = response.data.data.list;
                              _this.total = response.data.data.total;
                          }
                      })
                      .catch(function (error) {
                          // 处理错误情况
                          console.log(error);
                      })
                      .finally(function () {
                          // 总是会执行
                      });
              },
              //每页数量发生变化
              handleSizeChange(val) {
                  console.log(`每页 ${val} 条`);
                  //每页显示数量赋值
                  this.pageSize = val;
                  //调用方法
                  this.loadData();
              },
              //页码 第几页  发生变化
              handleCurrentChange(val) {
                  console.log(`当前页: ${val}`);
                  //当前页赋值
                  this.currentPage = val;
                  //调用方法
                  this.loadData();
              },
              //搜索功能
              search(){
                  //调用方法
                  this.loadData();
              },
              //提交表单
              submitForm(f1) {
                  this.$refs[f1].validate((valid) => {
                      if (valid) {//校验成功
                          //触发提交  提交的处理业务
                          //定义提交url地址
                          let uri = '/dept/add';
                          //let uri = '';
                          //判断是否是更新
                          if(this.title == '部门更新'){
                              uri='/dept/update';
                          }
                          // if(this.title == '部门更新'){
                          //     uri='/dept/update';
                          // }else{
                          //     uri = '/dept/add';
                          // }
                          //alert('submit!');
                          //定义 this是vue对象
                          let _this = this;
                          //this.form={"deptName":xxx,"loc":xxx}
                          axios.post(uri,this.form)
                              .then(function (response) {
                                  // 处理成功情况   response后台给我们响应的数据

                                  console.log(response);
                                  //判断返回状态
                                  if(response.data.code==200){
                                      //提示成功
                                      _this.$message({
                                          message: '恭喜你，这是一条成功消息',
                                          type: 'success'
                                      });
                                      //调用查询
                                      _this.loadData();
                                      //关闭对话框
                                      _this.dialogFormVisible=false;
                                  }else{
                                      _this.$message.error('错了哦，这是一条错误消息');
                                  }
                              })
                              .catch(function (error) {
                                  // 处理错误情况
                                  console.log(error);
                              })
                              .finally(function () {
                                  // 总是会执行
                              });
                      } else {//校验失败
                          console.log('error submit!!');
                          return false;
                      }
                  });
              },
              //重置表单
              resetForm(f2) {
                  this.$refs[f2].resetFields();
              },
              //处理添加，弹出添加对话框
              handleAdd(){
                  //弹框出现
                  this.dialogFormVisible = true;
                  //执行重置，清空原来的数据
                  // if(this.form.deptName!=null&&this.form.deptName!=''){
                  //     this.$refs['form'].resetFields();
                  // }
                  //改变title
                  this.title="部门添加";
                  //把form重复赋值为{}
                  this.form={};

              },
              //处理更新
              handleEdit(index, row) {
                  // console.log(index);
                  // console.log(row);
                  // console.log(index, row);
                  // console.log(row.deptNo)
                  // console.log(row.deptName)
                  // console.log(row.loc)
                  //弹框出现
                  this.dialogFormVisible = true;
                  //改变title
                  this.title="部门更新";
                  //给当前form赋值  js浅克隆和深克隆
                  //js深克隆  双向数据绑定     深克隆: row是json对象  需要先把json对象转为json字符串stringify  再把json字符串转回为对象parse
                  this.form = JSON.parse(JSON.stringify(row));
                  console.log(this.form.deptNo)
                  console.log(this.form.deptName)
                  console.log(this.form.loc)
              },
              //处理删除
              handleDelete(index, row) {
                  // console.log(index);
                  // console.log(row);
                  // console.log(index, row);
                  // console.log(row.deptNo)
                  // console.log(row.deptName)
                  // console.log(row.loc)
                  this.$confirm('此操作将永久删除该数据吗, 是否继续?', '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                  }).then(() => {
                      //使用axios删除
                      //定义 this是vue对象
                      let _this = this;
                      //this.form={"deptName":xxx,"loc":xxx}
                      axios.delete('/dept/deleteById?deptNo='+row.deptNo)
                          .then(function (response) {
                              // 处理成功情况   response后台给我们响应的数据
                              console.log(response);
                              //判断返回状态
                              if(response.data.code==200){
                                  //提示成功
                                  _this.$message({
                                      message: '恭喜你，这是一条成功消息',
                                      type: 'success'
                                  });
                                  //调用查询
                                  _this.loadData();
                              }else{
                                  _this.$message.error('错了哦，这是一条错误消息');
                              }
                          })
                          .catch(function (error) {
                              // 处理错误情况
                              console.log(error);
                          })
                          .finally(function () {
                              // 总是会执行
                          });
                  }).catch(() => {
                      this.$message({
                          type: 'info',
                          message: '已取消删除'
                      });
                  });
              }

          }
      })
  </script>
</body>
</html>